<template>
    <div style="height: 100%; position: relative">
        <el-drawer
			
            :before-close="handleClose"
            :visible.sync="show_dialog"
            direction="rtl"
			size="50%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content">
                <el-form :model="form">
               
                    <el-form-item
                        label="积分充值类型"
                        :label-width="formLabelWidth"
                    >
                        <el-select
                            v-model="form.points_model"
                            placeholder="请选择积分充值类型"
                        >
                            <el-option
                                label="预充值模式"
                                value="1"
                            ></el-option>
                            <el-option
                                label="后结算模式"
                                value="2"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                     <el-form-item
                        label="店铺名称"
                      :label-width="formLabelWidth">
                    <el-col :span="8">
                                <el-input v-if="item_data" v-model="item_data.store_name" placeholder="请选择店铺" @click.native="showStoreBox=true"></el-input>
		                         <store-list :showStoreBox.sync="showStoreBox" @chooseStore="getStoreInfo"></store-list>
                
                      
                    </el-col>
                    </el-form-item>

                 <el-form-item
                        label="商家购买金额（万元）"
                        :label-width="formLabelWidth"
                    >
                       <el-col :span="8">
                        <el-input
                           
                            v-model="form.amount"
                            autocomplete="off"
                            
                        ></el-input>
                         </el-col>
                    </el-form-item>
                       <el-form-item
                        label="积分赠送比（车家佳赠送积分/商家购买积分）"
                       :label-width="formLabelWidth"
                    >
                       <el-col :span="8">
                        <el-input
                            v-model="form.points_ratio"
                            autocomplete="off"
                        ></el-input>
                         </el-col>
                    </el-form-item>
                    
                     <el-form-item   
                     label="选择时间"
                     :label-width="formLabelWidth">
                  
                <el-date-picker
                    v-model="form.addTime"
					value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                 </el-form-item>
                     
                        <el-form-item
                        label="配置类别"
                        :label-width="formLabelWidth"
                    >
                       <el-col :span="8">
                        <el-input
                            v-model="form.config_type"
                            autocomplete="off"
                        ></el-input>
                         </el-col>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button
                        type="primary"
                        @click="$refs.drawer.closeDrawer()"
                        :loading="loading"
                        >{{ loading ? "提交中 ..." : "确 定" }}</el-button
                    >
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import storeList from "@/components/home/store-list.vue";
import {dateFormatter} from "../../../../common/js/util"
export default {
    	components: {storeList},
    data() {
        return {
            loading: false,
            form: {
                id:'',
                points_model: '',
                amount: '',
                points_ratio: '',
                addTime: '',
                config_type: ''
            },
           
            formLabelWidth: '100px',
            timer: null,
            showStoreBox:false,
			show_dialog:false,
            type:'add',///新增
            props: ['storeInfo'],
            item_data:''
             
           
        };
	},
	created(){
        console.log('created',this)
       
    },
    
    methods: {
            ////获取单个店铺信息只需要 id和name
       getStoreInfo(storeDataInfo) {
          
           console.log('-storeDataInfo------->>>',storeDataInfo);
            this.item_data.store_name = storeDataInfo.storeName;
            this.item_data.store_id= storeDataInfo.storeId;
  
		},
    ////data 为上一页面带过去的
		show_dialog_fn(data){
			if(data){
				this.item_data = data;
                this.type = 'edit'///edit
                console.log('item_data===============',this.item_data);
                this.form.points_model= this.item_data.points_model;
                this.form.amount=this.item_data.amount;
                this.form.points_ratio=this.item_data.points_ratio;
                this.form.config_type=this.item_data.config_type;
			}
			this.show_dialog = true;
		},
        handleClose(done) {
			//done 用于关闭 Drawer
            if (this.loading) {
                return;
            }
            this.$confirm('确定要提交表单吗？')
                .then(_ => {
                    this.loading = true;
                    this.timer = setTimeout(() => {
                           
                        this.conformFun().then(() =>{
                          
                           done();


                        })
                      
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            // console.log(this.$parent)
                            // this.$parent.getList();
                            this.loading = false;
                        }, 400);
                    }, 2000);
                })
                .catch(_ => { });
        },
        cancelForm() {
            this.loading = false;
			this.show_dialog = false;
            clearTimeout(this.timer);
        },
        
        conformFun(){
               
         
          
                const data = {};

                data.points_model = this.form.points_model;
                data.amount = this.form.amount;
                data.points_ratio = this.form.points_ratio;
                data.config_type = this.form.config_type;
                data.store_id = this.item_data.store_id;
                data.store_name = this.item_data.store_name;

                 console.log('xxxxxxxxxxxxxxx--data--xxxxxxxxxxxxxx',data);
				if (this.form.addTime) {
                    // const endAddMS = this.form.addTime[1].getTime();
					// const startAddMS = this.form.addTime[0].getTime();
					
					// if (startAddMS == endAddMS) {
					// 	data.start_date = dateFormatter('YYYY-MM-DD hh:mm:ss', startAddMS);
					// 	data.end_date = dateFormatter('YYYY-MM-DD hh:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    // } else {
						data.start_date = dateFormatter('YYYY-MM-DD HH:mm:ss', this.form.addTime[0]);
						data.end_date = dateFormatter('YYYY-MM-DD HH:mm:ss', this.form.addTime[1]);
                    // }
                }
               

				return this.$http.post('/admin/points/index.php?act=points_config&op=addOrEdit', data).then(res => {
					if (res.code == 1) {
                          this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
					
					}
					
					else {
						alert(res.msg);
					}
				})
			
			       
		
    },
    }
};
</script>
<style lang="scss" scoped>
 .el-form-item label:after {
        content: "";
        display: inline-block;
        width: 100%;
    }

    .el-form-item__label {
        text-align: center;
        height: 50px;
    }
    
    .el-form-item.is-required .el-form-item__label:before {
        content: none !important;
    }
    .el-input__inner{

       min-width: 350px;
    }
   
</style>